<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
        <link rel="stylesheet" href="gallery/css/main.css">
    </head>
    <body class="um-vp bc-bg" ontouchstart>
        <div id="page_0" class="up ub ub-ver" tabindex="0">
            <div id="header" class="uh bc-text-head ub bc-head">
                <div class="nav-btn" id="nav-left">
                    <div class="ub-img res-list umw2 umh2"></div>
                </div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">校园风貌</h1>
                <div class="nav-btn nav-bt" id="nav-right">
                    <!--按钮开始-->
                    <div class="ub-img res-edit umw2 umh2"></div>
                    <!--按钮结束-->
                </div>
            </div>
            <div id="content" class="ub-f1 tx-l">

            </div>
        </div>
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
    </body>
    <script>
	    var f = parseInt(parseInt(window.screen.width)) / parseInt($('body').width(), 10);
	    var em = '';
        appcan.ready(function() {
        	if(!appcan.detect.os.phone) f = 1;
            var titHeight = $('#header').offset().height;
            em = parseInt($('#header').css('font-size'));
            appcan.frame.open("content", "gallery_content.html", 0, titHeight);
            window.onorientationchange = window.onresize = function() {
                appcan.frame.resize("content", 0, titHeight);
            }
            appcan.window.publish("main_window_open", "");
            appcan.window.subscribe("main_window_close", function() {
                appcan.window.close(-1);
            });
            appcan.window.subscribe("main_window_active", function() {
                drawer_status = 1;
                animFrame();
            })
            appcan.window.monitorKey(0,function(){
                if(drawer_status){
                    animFrame();
                }else{
                    appcan.window.publish("draw_close","");
                    appcan.window.close(-1);
                }
            })
        });
        var drawer_status = 0;
        appcan.button(".nav-btn", "btn-act", function(a, b) {
            var btn = $(a.currentTarget);
            var btn_id = btn.attr('id');
            if (btn_id == 'nav-left') {
                animFrame();
            } else {

            }
        })
        function animFrame() {
            var move = {
                dx : drawer_status ? 0 : parseInt(($('#header').offset().width - 4*em) * f),
                dy : drawer_status ? 0 : 10,
                callback : function() {

                }
            }
            drawer_status = drawer_status ? 0 : 1;
            appcan.window.setWindowFrame(move);
        }
    </script>
</html>